<template>
  <div class="shade" @click.stop="closeDepark" v-show="isShowInfo"></div>
  <div
    class="depart-container"
    v-show="isShowInfo"
    :class="isShowAssestInfo ? 'top-move' : ''"
  >
    <div
      class="room-info ground-glass"
      :class="isShowAssestInfo ? 'right-move' : ''"
    >
      <h3>{{ roomName }}</h3>
      <div class="line"></div>
      <div class="department-box" v-for="item in departList">
        <p class="department-name">{{ item.name }}</p>
        <p class="department-members">
          <a
            class="member-name"
            :href="`http://oa.shihua9.com/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/${j.user_id}`"
            target="_blank"
            style="color: inherit; text-decoration: none; cursor: pointer"
            onmouseover="this.style.color='#4F46E5'"
            onmouseout="this.style.color='inherit'"
            v-for="j in item.members"
            >{{ j.user_name }}
          </a>
        </p>
      </div>
      <div class="department-box" v-if="assestList.length > 0">
        <p class="department-name fixex-name">
          固定资产列表 <span @click.stop="showAssestsList">查看详情</span>
        </p>
        <div class="department-members zc-box">
          <div class="item-box" v-for="item in assestList">
            {{ item.zcmc }}x{{ item.total }}
          </div>
        </div>
      </div>
    </div>
    <div class="assests-info left-move ground-glass" v-show="isShowAssestInfo">
      <div class="close-info" @click.stop="closeAssestsInfo">收起</div>
      <div class="detial-box">
        <div class="detail-item" v-for="item in assestDetail">
          <span>{{ item.zcbhx }}</span
          >-- <span>{{ item.zcmc }}</span
          >--
          <span>{{ item.xh }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import bus from "@/utils/bus";
import { getRoomDetial } from "@/api/index.js";
const prop = defineProps({
  roomName: {
    type: String,
    default: "",
  },
});
const roomName = ref("");
const isShowInfo = ref(false);
const assestList = ref([]);
const assestDetail = ref([]);
let departList = reactive({});
// 资产详情是否展示
const isShowAssestInfo = ref(false);
// 查看固定资产列表详情
function showAssestsList() {
  if (!isShowAssestInfo.value) {
    isShowAssestInfo.value = true;
  }
}
// 收起固定资产列表详情
function closeAssestsInfo() {
  isShowAssestInfo.value = false;
}
// 获取办公室详情
function getMessage(roomid) {
  if (roomid == 0) {
    return;
  }
  getRoomDetial(roomid).then(({ data: res }) => {
    if (res.code == 0) {
      const roomInfo = res.data || {
        room_id: roomId,
        room_name: roomName,
        user_total: 0,
        user_list: [],
        device_total: 0,
        device_list: [],
        device_data: [],
      };
      if (roomInfo.device_data.length > 0) {
        assestList.value = roomInfo.device_data;
      }
      if (roomInfo.device_list.length > 0) {
        assestDetail.value = roomInfo.device_list.filter(
          (item) => item.zcdl == 1
        );
      }
      if (roomInfo.user_total > 0) {
        if (roomInfo.user_list && roomInfo.user_list.length > 0) {
          // 按部门分组并统计人数
          const departmentGroups = {};
          const departmentCounts = {};
          roomInfo.user_list.forEach((user) => {
            const dept = user.department_name || "其他";
            if (!departmentGroups[dept]) {
              departmentGroups[dept] = [];
              departmentCounts[dept] = 0;
            }
            departmentGroups[dept].push(user);
            departmentCounts[dept]++;
          });

          // 修改部门排序逻辑，计算每个部门的平均 seclevel
          const departmentAvgSecLevel = {};
          Object.keys(departmentGroups).forEach((dept) => {
            const totalSecLevel = departmentGroups[dept].reduce(
              (sum, user) => sum + (parseInt(user.seclevel) || 0),
              0
            );
            departmentAvgSecLevel[dept] =
              totalSecLevel / departmentGroups[dept].length;
          });

          // 按平均 seclevel 排序部门
          const sortedDepartments = Object.keys(departmentGroups).sort(
            (a, b) => {
              // 首先按平均 seclevel 降序排序
              const avgDiff =
                departmentAvgSecLevel[b] - departmentAvgSecLevel[a];
              if (avgDiff !== 0) {
                return avgDiff;
              }
              // 如果平均值相同，按部门名称排序
              return b.localeCompare(a, "zh-CN");
            }
          );
          for (const dept of sortedDepartments) {
            // 对每个部门内的人员按 seclevel 和 user_id 排序
            const sortedUsers = departmentGroups[dept].sort((a, b) => {
              // 首先按 seclevel 降序排序
              const secLevelDiff =
                (parseInt(b.seclevel) || 0) - (parseInt(a.seclevel) || 0);
              if (secLevelDiff !== 0) {
                return secLevelDiff;
              }
              // seclevel 相同时，按 user_id 排序
              return parseInt(a.user_id || 0) - parseInt(b.user_id || 0);
            });
            // 将部门信息加入 departList
            departList[dept] = {
              name: dept,
              members: sortedUsers,
            };
          }
        }
      }
    }
  });
}
bus.on("openRoomDialog", (room) => {
  if (room.roomid == 0) {
    return;
  }
  isShowInfo.value = true;
  roomName.value = room.name;
  getMessage(room.roomid);
});
// 关闭弹窗
function closeDepark(event) {
  event.stopPropagation();
  isShowInfo.value = false;
  if (isShowAssestInfo.value) {
    isShowAssestInfo.value = false;
  }
  departList = reactive({});
  assestList.value = [];
  assestDetail.value = [];
}
</script>

<style scoped lang="less">
.line {
  width: 100%;
  height: 2px;
  background-color: #e5e7eb;
}
.depart-container {
  z-index: 10000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
  .room-info,
  .assests-info {
    transition: all 0.3s ease;
  }
  .room-info {
    width: 500px;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
  }
  .detial-box {
    width: 500px;
    max-height: 520px;
    overflow-y: scroll;
  }
  .assests-info {
    width: 500px;
    padding: 20px;
    position: absolute;
    top: 0;
    display: flex;
    flex-wrap: wrap;
    .close-info {
      position: fixed;
      right: 20px;
      top: 10px;
      color: #4f46e5;
      cursor: pointer;
      &:hover {
        color: #342ae9;
      }
    }
    .detail-item {
      margin-right: 10px;
      span {
        line-height: 32px;
        font-weight: 800;
      }
    }
  }
}
.department-box {
  border-bottom: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 8px;
  margin: 5px 0;
}

.department-box p {
  margin: 0;
}

.department-name {
  color: #4b5563;
  font-weight: bold;
  margin-bottom: 4px !important;
}
.fixex-name {
  color: #2d333b;
  font-weight: 800;
  span {
    position: absolute;
    right: 40px;
    color: #4f46e5;
    cursor: pointer;
    &:hover {
      color: #342ae9;
    }
  }
}
.zc-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.department-members {
  color: #111111;
  .member-name {
    margin-right: 5px;
  }
  .item-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    margin-right: 10px;
    border: 1px solid #a2a3a5;
    padding: 5px;
    color: #000000;
    margin-top: 5px;
    border-radius: 5px;
  }
}
</style>
